
import React from 'react'
import {Card,Row,Col,Button,Icon,Form, Input,Select,Cascader,InputNumber ,message,Spin} from 'antd';
import PureRenderMixin from 'react-addons-pure-render-mixin'
import {Link} from 'react-router-dom'

import LeftMenu from 'component/leftmenu/index.jsx';
import HeadImgContent from 'component/headimgcontent/index.jsx';
import LeftMenuItem from 'component/leftmenuitem/index.jsx';


import MMUtile from 'util/mm.jsx'
import User from 'service/user-service.jsx'
const _mm = new MMUtile();
const _user = new User();


const FormItem = Form.Item;
const Option = Select.Option;


let residences = [];	
class UserLinkForm extends React.Component{
	constructor(props){
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.state = {
			bodytype:'',
			bodyheight:'',
			marriage:'',
			education:'',
			school:'',
			occupation:'',
			income:'',
			qq:'',
			address:'',
			place:[],
			items:[{'name':'修改头像','actived':false,'link':'/update-head-img','icon':'smile-o'},
			{'name':'基本资料','actived':false,'link':'/user-base','icon':'solution'},
			{'name':'详细资料','actived':true,'link':'','icon':'link'},
			{'name':'设置昵称','actived':false,'link':'/user-nick','icon':'tool'},
			{'name':'账号绑定','actived':false,'link':'/binduser','icon':'lock'}],
			loading:true
		}

	}
	componentDidMount(){
		_user.getProvice().then((res)=>{
			residences = res;
			this.setState({
				place:['11','110101']
			})
		},(errMsg)=>{
			_mm.errorTips(errMsg);
		})
		//获取详细资料
		_user.getUserDetailed().then((res)=>{
			
			this.setState({
				bodytype:res.bodytype,
				bodyheight:res.bodyheight,
				marriage:res.marriage,
				education:res.education,
				school:res.school,
				occupation:res.occupation,
				qq:res.qq,
				income:res.income,
				address:res.address,
				place:res.place == undefined?[]:res.place.split(','),
				loading:false
			})
			if(res.place == undefined){
				this.setState({
					place:['11','110101']
				})
			}
		},(errMsg)=>{
			
			this.setState({
				loading:false
			})
			_mm.errorTips(errMsg);
		})
	}
	handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
    	if (err) {
        return;
      }
      _user.setUserDetailed({
				bodytype:values.bodytype,
				bodyheight:values.bodyheight,
				marriage:values.marriage,
				education:values.education,
				school:values.school,
				occupation:values.occupation,
				qq:values.qq,
				income:values.income,
				place:values.place,
				address:values.address
			}).then((res)=>{
				message.success('用户详细信息保存成功');
			},(errMsg)=>{
				_mm.errorTips(errMsg);
			})
      
    });
  }
	render(){
		const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
		return(
			<div>
				<Row gutter={24}>
					<Col span={7}>
		        <Card bordered={true} className="itemminheight"><LeftMenuItem items={this.state.items}></LeftMenuItem></Card>
		      </Col>
		      <Col span={17}>
						<Spin spinning={this.state.loading}   size="large">
						<Form onSubmit={this.handleSubmit.bind(this)}>
			        <Card title="详细信息" bordered={false}>
			        	<Row>
			        		<Col span={12} style={{lineHeight:'40px'}}>
										<FormItem
						          {...formItemLayout}
						          label="体型"
						        >
						          {getFieldDecorator('bodytype', {
						            initialValue:this.state.bodytype,
						          })(
						            <Select >
										      <Option value="">请选择</Option>
										      <Option value="A">标准</Option>
										      <Option value="B">匀称</Option>
										      <Option value="C">丰满</Option>
										      <Option value="D">性感</Option>
										      <Option value="E">苗条</Option>
										      <Option value="F">精炼</Option>
										      <Option value="G">高挑</Option>
										      <Option value="H">健壮</Option>
										      <Option value="I">偏胖</Option>
										      <Option value="J">偏瘦</Option>
										      <Option value="K">残缺之美</Option>
										    </Select>
						          )}
						        </FormItem>
			        		</Col>
			        		<Col span={12}>
										<FormItem
						          {...formItemLayout}
						          label="身高(cm)"
						        >
						          {getFieldDecorator('bodyheight', {
											  initialValue:this.state.bodyheight
											})(
						            <InputNumber min={40} max={220}  />
						          )}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<Row>
			        		<Col span={12} style={{lineHeight:'40px'}}>
										<FormItem
						          {...formItemLayout}
						          label="婚姻状态"
						        >
						          {getFieldDecorator('marriage', {
											  initialValue:this.state.marriage
											})(
						            <Select >
										      <Option value="">请选择</Option>
										      <Option value="A">未婚</Option>
										      <Option value="B">已婚</Option>
										      <Option value="C">保密</Option>
										    </Select>
						          )}
						        </FormItem>
			        		</Col>
			        		<Col span={12}>
										<FormItem
						          {...formItemLayout}
						          label="教育程度"
						        >
						          {getFieldDecorator('education', {
											  initialValue:this.state.education
											})(
						            <Select >
										      <Option value="">请选择</Option>
										      <Option value="A">小学 | 初中</Option>
										      <Option value="B">中专 | 高中</Option>
										      <Option value="C">大专 | 本科</Option>
										      <Option value="D">研究生以上</Option>
										    </Select>
						          )}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<Row>
			        		<Col span={12} style={{lineHeight:'40px'}}>
										<FormItem
						          {...formItemLayout}
						          label="毕业学校"
						        >
						          {getFieldDecorator('school', {
											  initialValue:this.state.school
											})(
						            <Input  />
						          )}
						        </FormItem>
			        		</Col>
			        		<Col span={12}>
										<FormItem
						          {...formItemLayout}
						          label="职业"
						        >
						          {getFieldDecorator('occupation', {
											  initialValue:this.state.occupation
											})(
						            <Select >
										      <Option value="">请选择</Option>
										      <Option value="A">学生</Option>
										      <Option value="B">政府机关|干部</Option>
										      <Option value="C">邮政通信</Option>
										      <Option value="D">计算机</Option>
										      <Option value="E">网络</Option>
										      <Option value="F">商业贸易</Option>
										      <Option value="G">银行|证券|金融|保险|投资</Option>
										      <Option value="H">税务</Option>
										      <Option value="I">咨询</Option>
										      <Option value="J">社会服务</Option>
										      <Option value="K">旅游|饭店</Option>
										      <Option value="L">健康|医疗服务</Option>
										      <Option value="M">房地产|交通运输</Option>
										      <Option value="N">法律|司法</Option>
										      <Option value="O">媒介|广告</Option>
										      <Option value="P">文化|娱乐|体育</Option>
										      <Option value="Q">科研|教育</Option>
										      <Option value="R">媒体|推广</Option>
										      <Option value="S">农、林、牧、渔</Option>
										      <Option value="T">矿业|制造业</Option>
										    </Select>
						          )}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<Row>
			        		<Col span={12} style={{lineHeight:'40px'}}>
										<FormItem
						          {...formItemLayout}
						          label="QQ"
						        >
						          {getFieldDecorator('qq', {
											  initialValue:this.state.qq
											})(
						            <InputNumber  />
						          )}
						        </FormItem>
			        		</Col>
			        		<Col span={12}>
										<FormItem
						          {...formItemLayout}
						          label="收入水平"
						        >
						          {getFieldDecorator('income', {
											  initialValue:this.state.income
											})(
						            <Select >
										      <Option value="">请选择</Option>
										      <Option value="A">3000以下</Option>
										      <Option value="B">3001-6000</Option>
										      <Option value="C">6001-10000</Option>
										      <Option value="D">10001-20000</Option>
										      <Option value="E">20000以上</Option>
										    </Select>
						          )}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<Row>
			        		<Col span={12} style={{lineHeight:'40px'}}>
			        			<FormItem
						          {...formItemLayout}
						          label="居住地"
						        >
						          {getFieldDecorator('place', {
						            initialValue: this.state.place
						          })(
						            <Cascader options={residences} />
						          )}
						        </FormItem>
			        		</Col>
			        		<Col span={12}>
										<FormItem
						          {...formItemLayout}
						          label="通讯地址"
						        >
						          {getFieldDecorator('address', {
											  initialValue:this.state.address
											})(
						            <Input  />
						          )}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<FormItem>
				          <Button
				            type="primary"
				            htmlType="submit"
				          >
				            提交
				          </Button>
				        </FormItem>
			        </Card>
						</Form>
						</Spin>
		      </Col>
				</Row>
			</div>
		)
	}
}
const UserLink = Form.create()(UserLinkForm);
export default UserLink;